<template>

  <v-app id="inspire">
    <v-content>
      
      <router-view></router-view>
      <v-container fluid fill-height>
        <v-layout align-center justify-center>
          <v-flex xs12 sm8 md4>
            <v-card class="elevation-12">
              <v-toolbar dark color="primary">
                <v-toolbar-title>Login</v-toolbar-title>
                <v-spacer></v-spacer>
              </v-toolbar>
              <v-card-text>
                <v-form>
                  <v-text-field   
      v-validate="'required|max:10'"
      v-model="username"
      :counter="10"
      :error-messages="errors.collect('username')"
      data-vv-name="username"
      required prepend-icon="person" name="username" label="Login" type="text"></v-text-field>

                  <v-text-field id="password"
                        v-validate="'required|min:5'"
      v-model="password"
      :counter="10"
      :error-messages="errors.collect('password')"
      data-vv-name="password"
                  
                  
                  
                  
                   prepend-icon="lock" name="password" label="Password" type="password"></v-text-field>
                    <v-checkbox
      v-model="checkbox"
      :error-messages="errors.collect('checkbox')"
      value="1"
      label="Remember Me"
      data-vv-name="checkbox"
      type="checkbox"
      required
    ></v-checkbox>
                </v-form>
              </v-card-text>
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn @click="submit();getToken()" color="primary">submit</v-btn>
                <v-btn color="primary" @click="toRegister()">Register</v-btn>
              </v-card-actions>
              
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</template>
<script>
import Vue from "vue";
import VeeValidate from "vee-validate";
//import Axios from "axios"
import console from "console";
Vue.use(VeeValidate);

export default {
  name: "login",
  $_veeValidate: {
    validator: "new"
  },

  data: () => ({
    username: "",
    password: "",
    checkbox: null,
    dictionary: {
      attributes: {
        email: "E-mail Address"
        // custom attributes
      },
      custom: {
        username: {
          required: () => "Name can not be empty",
          max: "The name field may not be greater than 10 characters"
          // custom messages
        },
        password: {
          required: () => "Password can not be empty",
          min: "at least 5 words"
        }
      }
    }
  }),

  mounted() {
    this.$validator.localize("en", this.dictionary);
  },

  methods: {
    submit() {
      this.$validator.validateAll();
    },
    getToken() {
      this.$http
        .post(
          "/oauth/token?grant_type=password&client_id=client_2&client_secret=123456&username=" +
            this.username +
            "&password=" +
            this.password,
          {}
        )
        .then(
          function(response) {
            if (response.status == 200) {
              sessionStorage.setItem("token", response.data.access_token);
              sessionStorage.setItem("username", this.username);
              //alert(sessionStorage.getItem("token"));
              console.log(response.data.access_token);

              this.$router.push("index");
            } else {
              console.log("err");
              this.$router.push("/");
            }
          }.bind(this)
        )
        .catch(function(error) {
          console.log(error);
          
        });
    },
    toRegister(){
      this.$router.push("/register");
    }
    ,
    clear() {
      this.username = "";
      this.password = "";
      this.checkbox = null;
      this.$validator.reset();
    }
  }
};
</script>